---
title: Create a web component grid
---

import siteConfig from '/docusaurus.config.js';

NB: This example is broken, the web component is not loaded in the sandpack config.

Create a web component grid

<SandpackEditor>

```ts
import canvasDatagrid from 'canvas-datagrid';
import data from '/data.json';

const app = document.getElementById('app');
const grid = document.createElement('canvas-datagrid');

app.appendChild(grid);
```

```json data.json
[
  { "col1": "foo", "col2": 0, "col3": "a" },
  { "col1": "bar", "col2": 1, "col3": "b" },
  { "col1": "baz", "col2": 2, "col3": "c" }
]
```

</SandpackEditor>
